﻿@page
@model IdentityServer.Pages.TreeDomainDemo.IndexModel

@{
    ViewData["Title"] = "Index";
}

@section Styles
    {
    <partial name="_JqGridStylesPartial" />
    <partial name="_LayuiStylesPartial" />
}

<h2>Index</h2>

<p>
    <a asp-page="Create">Create New</a>
</p>

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.TreeDomain[0].SampleColumn)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TreeDomain[0].Parent)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TreeDomain[0].OrderNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TreeDomain[0].RowVersion)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TreeDomain[0].IsDeleted)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TreeDomain[0].CreationTime)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TreeDomain[0].LastModificationTime)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TreeDomain[0].CreationUser)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TreeDomain[0].LastModificationUser)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody id="vueApp">
        <tr v-for="item in treeDomains">
            <td>
                {{item.sampleColumn}}
            </td>
            <td>
                {{item.parentId}}
            </td>
            <td>
                {{item.orderNumber}}
            </td>
            <td>
                {{item.rowVersion}}
            </td>
            <td>
                {{item.isDeleted}}
            </td>
            <td>
                {{item.creationTime}}
            </td>
            <td>
                {{item.lastModificationTime}}
            </td>
            <td>
                {{item.creationUserId}}
            </td>
            <td>
                {{item.lastModificationUserId}}
            </td>
            <td>
                <a v-bind:href=item.editLink >Edit</a> |
                <a v-bind:href=item.detailsLink >Details</a> |
                <a v-bind:href=item.deleteLink >Delete</a>
            </td>
        </tr>
    </tbody>
</table>

<div class="layui-form layui-form-pane" style="background-color: white">
    <div class="layui-form-item" pane>
        <label class="layui-form-label">无刷新翻页</label>
        <div class="layui-input-block">
            <input id="ajaxPagination" type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF">
        </div>
    </div>
    <div id="layPager"></div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <partial name="_LinqJsScriptsPartial" />
    <partial name="_JqGridScriptsPartial" />
    <partial name="_LayuiScriptsPartial" />
    <partial name="_VueScriptsPartial"/>

    <script>
        var grid = $("#jqGrid");

        $(document).ready(function () {
            window.Enumerable.config.extends.array = true;

            $.jgrid.defaults.responsive = true;
            $.jgrid.defaults.styleUI = 'Bootstrap';

            grid.jqGrid({
                url: '/TreeDomainDemo?handler=TreeGridData',
                datatype: 'json',
                treedatatype: "json",
                mtype: "GET",

                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false
                },

                colNames: ["Id", "数据列", "序号", "行版本", "已启用", "创建人", "创建时间", "上次修改人", "上次修改时间", "路径"],
                colModel: [
                    { name: 'id', index: 'id', hidden: true, key: true },
                    { name: 'sampleColumn', index: 'sampleColumn' },
                    { name: 'orderNumber', index: 'orderNumber' },
                    { name: 'rowVersion', index: 'rowVersion', align: "center" },
                    { name: 'isEnable', index: 'isEnable', align: "center", formatter: 'checkbox' },
                    { name: 'creationUserId', index: 'creationUserId', align: "center" },
                    { name: 'creationTime', index: 'creationTime', align: "center" },
                    { name: 'lastModificationUserId', index: 'lastModificationUserId', align: "center" },
                    { name: 'lastModificationTime', index: 'lastModificationTime', align: "center" },
                    { name: 'path', index: 'path' }
                ],
                height: 200,
                width: 'auto',
                treeGrid: true, //启用树型Grid功能
                treeGridModel: 'adjacency', //表示返回数据的读取类型，分为两种：和adjacency
                ExpandColumn: 'sampleColumn', //树型结构在哪列显示，在列模型中要放在非隐藏列的第一列
                tree_root_level: 0,
                loadonce: true,
                //multiSort: true,
                //sortname: 'sampleColumn',
                //rownumbers:true,//在最左边添加行号，树形表不能加，否则节点展开会有问题
                caption: "树表",
                multiselect: true,
                treeReader: {
                    parent_id_field: "parentId",
                    level_field: "depth",
                    leaf_field: "isLeaf",
                    expanded_field: "expanded",
                    loaded: 'loaded'//指示子节点是否已经加载，bool型，如果为fales，展开节点时会自动向服务器请求子节点
                },
                pager: "#jqGridPager"//在treeGrid模式下没有用
            });
            grid.navGrid('#jqGridPager',
                {
                    search: true, // show search button on the toolbar
                    add: false,
                    edit: false,
                    del: false,
                    refresh: true
                },
                {}, // edit options
                {}, // add options
                {}, // delete options
                { multipleSearch: true, multipleGroup: true, showQuery: true } // search options - define multiple search
            );

            (function initPager() {
                var locationUrl = parseUrl(window.location);
                var layerLoading;

                var vueData = {
                    treeDomains: {}
                };
                var vueApp;

                var pageParams = locationUrl.queryParams;
                var pageIndex = parseInt(pageParams.pageIndex || '@Model.PageIndex');
                var pageSize = parseInt(pageParams.pageSize || '@Model.PageSize');
                var count = @Model.ItemCount;
                var limits = [5, 10, 20, 30, 40, 50];

                var ajaxOptions = {
                    url: locationUrl.path + '?handler=vueData',
                    data: {
                        pageIndex: pageIndex,
                        pageSize: pageSize
                    },
                    success: function(res) {
                        vueData.treeDomains = res;
                        layer.close(layerLoading);
                    },
                    error: function(xhr, err, ex) {
                        layer.close(layerLoading);
                        layer.open({
                            shade: 0.3,
                            shadeClose: true,
                            content: '数据载入失败：' + err + '; ' + ex,
                            closeBtn: 0
                        });
                    }
                };

                if (!limits.any(l => l === pageSize)) {
                    limits.push(pageSize);
                    limits = limits.orderBy(l => l).toArray();
                }

                window.layui.use(['laypage', 'layer', 'form'], function() {
                    var laypage = window.layui.laypage;
                    var layer = window.layui.layer;

                    laypage.render({
                        elem: 'layPager',
                        count: count,
                        curr: pageIndex,
                        limit: pageSize,
                        limits: limits,
                        layout: ['prev', 'page', 'next', 'skip', 'limit', 'count', 'refresh'],
                        jump: function (pager, first) {
                            if (!first) {
                                if ($('#ajaxPagination')[0].checked) {
                                    layerLoading = layer.load(0,
                                        {
                                            shade: 0.3,
                                            shadeClose: false,
                                            scrollbar: false
                                        });
                                    ajaxOptions.data = {
                                        pageIndex: pager.curr,
                                        pageSize: pager.limit
                                    };
                                    $.ajax(ajaxOptions);
                                } else {
                                    var j = document.createElement('a');
                                    var $j = $(j);
                                    $j.attr('href', locationUrl.path + '?pageIndex=' + pager.curr + '&pageSize=' + pager.limit).css('display', 'none');
                                    $('body').append($j);
                                    j.click();
                                }
                            } else {
                                $.ajax(ajaxOptions);

                                vueApp = new Vue({
                                    el: '#vueApp',
                                    data: vueData
                                });
                            }
                        }
                    });
                });
            })();
        });
    </script>
}